<template>
  <!-- 返回组件 -->
  <navTabrBack
    :navbackStyle="['padding-right: 20rpx']"
    :title="'编辑专利集'"
    :titleStyle="['padding: 0 28rpx;']"
  ></navTabrBack>
  <view class="content">
    <view class="userItem">
      <view class="editTitle">更换封面</view>
      <view class="editData">
        <image
          :src="img + addData.img"
          mode="scaleToFill"
          @click="bindUpload"
        />

        <view class="iconfont icon-icon_arrow_right"></view>
      </view>
    </view>
    <view class="userItem">
      <view class="editTitle">专利集名称</view>
      <view class="editData" @click="open">
        <view class="mr">{{ addData.name }}</view>
        <view class="iconfont icon-icon_arrow_right"></view>
      </view>
    </view>
    <view class="userItem">
      <view class="editTitle">描述</view>
      <view class="editData" @click="tuEditent">
        <view class="mr">{{ addData.desc }}</view>
        <view class="iconfont icon-icon_arrow_right"></view>
      </view>
    </view>
  </view>
  <!-- 更换联系方式 -->
  <uni-popup ref="popup" type="bottom" :is-mask-click="false">
    <view class="dataList">
      <view class="addItemTitle">
        <view class="contacts">修改专利集名称</view>
        <input
          class="ctsInput"
          placeholder="请输入需要修改的名称"
          maxlength="20"
          v-model="newAddData.name"
        />
        <view class="identifyingCode"> </view>
        <view class="affirm">
          <view class="solid" @click="addDataList(true)">取消</view>
          <view class="" @click="addDataList(false)">确认</view>
        </view>
      </view>
    </view>
  </uni-popup>
  <!-- 更换联系方式 -->
  <uni-popup ref="popup1" type="bottom" :is-mask-click="false">
    <view class="dataList">
      <view class="addItemTitle">
        <view class="contacts">修改专利集描述</view>
        <input
          class="ctsInput"
          placeholder="请输入需要修改的描述"
          maxlength="100"
          v-model="newAddData.desc"
        />
        <view class="identifyingCode"> </view>
        <view class="affirm">
          <view class="solid" @click="addDataList1(true)">取消</view>
          <view class="" @click="addDataList1(false)">确认</view>
        </view>
      </view>
    </view>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="修改成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { onMounted, inject, reactive, toRefs, ref } from "vue";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
const $url = inject("$url");
const $imgSrc = inject("$imgSrc")
let data = reactive({
  userInfo: {},
  dataList: [],
  page: 1,
  id: "",
  img: "",
  addData: {
    name: "",
    desc: "",
    img: "",
  },
  newAddData: {
    name: "",
    desc: "",
    img: "../../../../static/img/page/02.png",
    userId: "",
    ID: "",
    CreatedAt:""
  },
});
let { addData, newAddData, img } = toRefs(data);
onLoad((item) => {
  data.page = 1
  data.img = $imgSrc
  data.id = item.id;
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      if (res.data.token?.length < 1) {
        uni.navigateTo({
          url: "/pages/login/login?type=1",
        });
      }
      data.userInfo = res.data;
      data.newAddData.ID = data.id * 1
      data.newAddData.userId = res.data.ID * 1
    },
  });
  updataList();
});
const updataList = () => {
  uni.request({
    url: $url + `/base/findZlGroup?ID=${data.id}`,
    method: "GET",
    timeout: 6000,
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      data.addData.name = res.data.data.rezlGroup.name;
      data.addData.desc = res.data.data.rezlGroup.desc;
      data.addData.img = res.data.data.rezlGroup.img;
      data.newAddData.name = res.data.data.rezlGroup.name;
      data.newAddData.desc = res.data.data.rezlGroup.desc;
      data.newAddData.img = res.data.data.rezlGroup.img;
      data.newAddData.CreatedAt = res.data.data.rezlGroup.CreatedAt;
    },
  });
};
const bindUpload = (e) => {
  wx.chooseImage({
    success(res) {
      const tempFilePaths = res.tempFilePaths;
      wx.uploadFile({
        url: $url + "/fileUploadAndDownload/upload", //仅为示例，非真实的接口地址
        filePath: tempFilePaths[0],
        name: "file",
        header: { "Content-Type": "multipart/form-data", "x-token": data.userInfo.token },
        formData: {
          user: "test",
        },
        success(res) {
          console.log(JSON.parse(res.data));
          //do something
          data.newAddData.img = JSON.parse(res.data).data.file.url
          addDataList(false)
        },
      });
    },
  });
};
let popup = ref();
let popup1 = ref();
let success = ref();

const open = () => {
  data.newAddData.name = "";
  popup.value.open("button-text");
};
const addDataList = (bool) => {
  if (bool) {
    data.newAddData.name = data.addData.name;
    popup.value.close();
  } else {
    if(data.newAddData.name?.trim().length == 0) return
    uni.request({
      url: $url + `/zlGroup/updateZlGroup`,
      method: "PUT",
      timeout: 6000,
      data: data.newAddData,
      header: {
        "x-token": data.userInfo.token,
      },
      fail: (err) => {
        console.log(err, "请求失败！");
      },
      success(res) {
        console.log(res);
        updataList();
        popup.value.close();
        success.value.open();
      },
    });
  }
};
const addDataList1 = (bool) => {
  if (bool) {
    data.newAddData.desc = data.addData.desc;
    popup1.value.close();
  } else {
    if(data.newAddData.desc?.trim().length==0) return
    uni.request({
      url: $url + `/zlGroup/updateZlGroup`,
      method: "PUT",
      timeout: 6000,
      data: data.newAddData,
      header: {
        "x-token": data.userInfo.token,
      },
      fail: (err) => {
        console.log(err, "请求失败！");
      },
      success(res) {
        console.log(res);
        updataList();
        popup1.value.close();
        success.value.open();
      },
    });
  }
};
const tuEditName = () => {
  uni.navigateTo({
    url: "/pages/editUserInfo/EditUserName/index",
  });
};
const tuEditPhone = () => {
  // uni.navigateTo({
  //   url: "/pages/editUserInfo/EditUserName/index",
  // });
};
const tuEditent = () => {
  data.newAddData.desc = "";
  popup1.value.open("button-text");
};
const login = () => {
  uni.redirectTo({
    url: "/pages/login/login",
  });
};
</script>

<style scoped>
.content {
  position: relative;
  padding: 0 28rpx;
  padding-bottom: 90rpx;
}
.userItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #f7f7f7;
}
.editTitle {
  flex: none;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.editData {
  display: flex;
  align-items: center;
}
.editData view {
  height: 72rpx;
  line-height: 72rpx;
}
.editData image {
  margin-right: 18rpx;
  width: 74rpx;
  height: 74rpx;
  background: #d8d8d8;
  border-radius: 11rpx;
}
.mr {
  min-width: 100rpx;
  margin-right: 27rpx;
  margin-left: 27rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.dataList {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(153, 153, 153, 0.8);
}
.addItemTitle {
  width: 507rpx;
  padding-top: 21rpx;
  background: #ffffff;
  border-radius: 14rpx;
}
.contacts {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.ctsInput {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 16rpx;
  margin: 32rpx 21rpx 0 21rpx;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 11rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.identifyingCode {
  display: flex;
  justify-content: space-between;
  margin: 27rpx 21rpx 50rpx 21rpx;
}
.ctsInputCode,
.InputCode {
  display: flex;
  align-items: center;
  flex: 0 0 46%;
  width: 201rpx;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 11rpx;
  border: 0;
}
.ctsInputCode {
  padding-left: 16rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.InputCode {
  margin: 0;
  padding: 0;
  justify-content: center;
  font-size: 25rpx;
  font-weight: 400;
  color: #1677ff;
}
.InputCode::after {
  border: 0;
  display: none;
}
.affirm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 90rpx;
  border-top: 1px solid #e5e5e5;
}
.affirm view {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solid {
  color: #1677ff;
  border-left: 1rpx solid #e5e5e5;
}
</style>
